<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>短信配置管理</title>
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>

<body class="pear-container">
	<!-- 筛选表单区域 -->
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<!-- 模板标题筛选 -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">手机号</label>
						<div class="layui-input-inline">
							<input type="text" name="phone" id="phone" placeholder="输入手机号" class="layui-input">
						</div>
					</div>
					<!-- 模板标题筛选 -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">短信内容</label>
						<div class="layui-input-inline">
							<input type="text" name="content" id="content" placeholder="输入短信内容" class="layui-input">
						</div>
					</div>
					<!-- 模板签名筛选 -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">模板签名</label>
						<div class="layui-input-inline">
							<input type="text" name="sign" id="sign" placeholder="输入模板签名" class="layui-input">
						</div>
					</div>
					<!-- 模板CODE筛选 -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">模板CODE</label>
						<div class="layui-input-inline">
							<input type="text" name="template_id" id="template_id" placeholder="输入模板CODE"
								class="layui-input">
						</div>
					</div>
					<!-- 模板状态筛选 -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">状态</label>
						<div class="layui-input-inline">
							<select name="is_send" id="is_send" lay-search>
								<option value="">请下拉选择</option>
								<option value="1">成功</option>
								<option value="0">失败</option>
							</select>
						</div>
					</div>
					<br>
					<!-- 搜索/重置按钮 -->
					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="base-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- 表格展示区域 -->
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="base-table" lay-filter="base-table"></table>
		</div>
	</div>

	<!-- 表格工具栏（新增/测试发送按钮） -->
	<script type="text/html" id="base-toolbar">
	</script>

	<!-- 表格操作列（编辑/删除/发送按钮） -->
	<script type="text/html" id="base-bar">
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
			<i class="layui-icon layui-icon-delete"></i>删除
		</button>
	</script>

	<!-- 模板状态格式化 -->
	<script type="text/html" id="base-isSend">
		{{#if (d.is_send == 1) { }}
			<i class="layui-icon layui-icon-face-smile" style="font-size: 20px; color: #1E9FFF;"><span>成功</span></i>  
		{{# }else if(d.is_send == 0){ }}
			<i class="layui-icon layui-icon-face-cry" style="font-size: 20px; color: #ff1e1e;"><span>失败</span></i> 
		{{# } }}
	</script>

	<!-- 引入依赖JS -->
	<script src="../../component/com/api.js"></script>
	<script src="../../component/com/auth.js"></script>
	<script src="../../component/layui/layui.js"></script>
	<script src="../../component/pear/pear.js"></script>
	<script>
		layui.use(['table', 'form', 'jquery', 'common'], function () {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;
			// 模块路径（对应新增/编辑页面的路径）
			let MODULE_PATH = "config";
			// 后端接口基础地址 + Token（复用账户页面逻辑）
			let API_BASE_URL = apiConfig.baseUrl;
			let token = window.localStorage.getItem("token") || window.sessionStorage.getItem("token")

			// 3. 表格列定义（匹配SMSTemplate模型字段）
			const cols = [
				[{
					type: 'checkbox'
				},
				{
					title: '序号',
					field: 'id',
					align: 'left',
					width: 80,
				},
				{
					title: '发送时间',
					field: 'send_time',
					align: 'center',
					width: 180,
				},
				{
					title: '手机号',
					field: 'phone',
					align: 'center',
					width: 120,
				},
				{
					title: '发送状态',
					field: 'is_send',
					align: 'center',
					width: 100,
					templet: '#base-isSend'
				},
				{
					title: '模板签名',
					field: 'sign',
					align: 'left',
					width: 100,
				},
				{
					title: '模板CODE',
					field: 'template_id',
					align: 'left',
					width: 150,
				},
				{
					title: '短信内容',
					field: 'content',
					align: 'left',
					// width: 180,
				}
				// {
				// 	title: '操作',
				// 	toolbar: '#base-bar',
				// 	align: 'center',
				// 	// width: 220,
				// 	fixed: "right"
				// },
				]
			];

			// 渲染表格（复用账户页面分页、请求头、数据解析逻辑）
			table.render({
				elem: '#base-table',
				//短信配置后端接口地址
				url: `${API_BASE_URL}/sms/log/`,
				page: true,
				// 分页参数配置（与后端保持一致）
				request: {
					pageName: 'page',
					limitName: 'limit'
				},
				// 分页条数选择器
				limits: [10, 20, 30, 40, 50, 100],
				limit: 10,
				cols: cols,
				skin: 'line',
				minmax: true,
				toolbar: '#base-toolbar',
				// 请求头携带Token（权限验证）
				headers: {
					"Authorization": token
				},
				// 解析后端返回数据（与账户接口返回格式一致）
				parseData: function (res) {
					return {
						"code": res.success ? 0 : 1,
						"msg": res.message || "操作成功",
						"count": res.data.count,
						"data": res.data.results,
						"curr": res.data.current_page
					};
				},
				// 默认工具栏（刷新、导出等）
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports'],
				// 表格渲染完成后，也重新加载一次供应商（防止表格刷新后下拉框为空）
				done: function () {
					// loadSmsProviders();
				}
			});

			// 表格行操作事件（编辑/删除）
			table.on('tool(base-table)', function (obj) {
				switch (obj.event) {
					case "remove":
						window.remove(obj)
						break;
				}
			});
			// 筛选表单提交事件
			form.on('submit(base-query)', function (data) {
				table.reload('base-table', {
					where: data.field // 携带筛选参数刷新表格
				})
				return false;
			});

			// 表格工具栏事件（新增/刷新）
			table.on('toolbar(base-table)', function (obj) {
				switch (obj.event) {
					case "refresh":
						window.refresh(obj)
						break;
				}
			});

			// 刷新表格
			window.refresh = function (param) {
				table.reload('base-table');
			}
		})
	</script>
</body>

</html>